<template>
    <div style="margin-bottom: 1.5rem">
        <div style="position: relative;z-index: 1;" >
            <div class="IndexBanner">
                <div class="banner_head">
                    <div class="swiper-container swiper-container1">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="imgs in bannerImgs"
                                 @click="jumpLinkBanner(imgs.jump_link)"><img :src="imgs.img_url"></div>
                            <!--<div class="swiper-slide"><img src= "../images/banner.png"  alt=""></div>-->
                        </div>
                    </div>
                </div>

            </div>
            <transition name="fade">
                <div class="userData" v-if="grids.message">
                    <div>
                        <p>账户余额（金币）</p>
                        <p>{{ grids.message.user_balance }}</p>
                    </div>
                    <ul class="clearfix">
                        <li>
                            <p>今日收益</p>
                            <p>{{ grids.message.totay_money }}</p>
                        </li>
                        <li>
                            <p>昨日收益</p>
                            <p>{{ grids.message.yesterday_money }}</p>
                        </li>
                    </ul>
                    <div id="signIn">
                        <img src="../images/qiandao1.png" alt="" @click="signInRes" v-if="!is_sign">
                        <a href="https://wb.renqidaren.com/app_html/versions.html" v-else>
                            <img src="../images/versionsUrl.png" alt=""></a>
                    </div>
                </div>

            </transition>
            <div style="position: relative;top: -.1rem">
                <div class="wokrList">
                    <ul>
                        <li class="unread" @click="unreadLink()">
                            <img src="../images/work.png" class="wokrListIcon" :class="{ is_greenerAnimate: unread }"/>
                            <p>我的消息</p>
                        </li>
                        <li>
                            <a href="https://wb.renqidaren.com/app_html/help_center.html">
                                <img src="../images/money.png" class="wokrListIcon"/>
                                <p>菜鸟攻略</p>
                            </a>
                        </li>
                        <li v-on:click="taskLink(1)" v-if="is_greener">
                            <img src="../images/home.png" class="wokrListIcon is_greenerAnimate"/>
                            <p>新手任务</p>
                        </li>
                        <li @click="returnWork" class="returnWorkIcon">
                            <img src="../images/hall.png" class="wokrListIcon"
                                 :class="{ is_greenerAnimate: returnNumber }"/>
                            <p>回访任务</p>
                            <span v-if="returnNumber">{{ returnNumber }}</span>
                        </li>
                    </ul>
                </div>
            </div>


            <div class="invterfirends">
                <div class="fl_invter contentImg" id="invterFirends">
                    <router-link to="/task/Apprentice" style="width: 100%;height: 100%;display: block;"></router-link>
                </div>
                <div class="fr_invter contentImg" v-on:click="privilegeTask()">
                    <span class="fr_invter-img" v-if="grids"><img src="../images/fr_invter-img.png" alt="">Lv{{ grids.message.user_level }}</span>
                </div>
                <div class="balance" v-if="grids" @click="$toast('您近期的任务正确率评分 ' + user_work_count.score)"><strong>{{
                    user_work_count.score }}分</strong></div>
            </div>
            <!--<div v-if="activity" class="activity">-->
            <!--<img src="../images/zhuanpan.jpg" alt="" width="100%" @click="jumpLinkBanner(activity)"-->
            <!--class="activity-img">-->
            <!--</div>-->

            <div style="padding: 0 .2rem;background: #fff;padding: .1rem .2rem" v-if="notice_text">
                <div class="liMarquee">
                    <img src="../images/toutiao.jpg" style="z-index: 9999;"/>
                    <div class="janros">
                        <div class="list">
                            <div class="cc rowup">
                                <MarqueeTips :content="notice_text" :speed="50"></MarqueeTips>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="is_greener">
                <div class="invterfirends invter">
                    <div class=" contentImg" @click="newbies = !newbies">新手必读</div>
                    <div class=" contentImg"
                         @click="jumpLinkBanner('https://wb.renqidaren.com/app_html/versions.html')">
                        更新日志
                    </div>
                </div>
                <div class="Img_title" id="beginner" v-show="newbies">
                    <div class="newbies clearfix" :class="{'newbies-active':!newbies}" style="display: none;">
                        <img src="@/images/zqglHide.png" alt="" class="fr" @click="newbies = !newbies">
                        <h2 @click="newbies = !newbies"><img src="@/images/zqgl.png" alt="" class="fl"><span>新人必读</span>
                        </h2>
                    </div>
                    <!--<img src="../images/title.png"/>-->
                    <!--<h3>新人必看</h3><span data-v-331f341c="" class="countDown beninner-count">最全萌新攻略 滑动查看 点击可看详情</span>-->
                    <transition name="slide-fade">
                        <div class="swiper-container swiper-container2" v-show="newbies">
                            <div class="swiper-wrapper">
                                <ul class="beginner_f1 swiper-slide active">
                                    <li>
                                        <router-link to="/task/bindingTab">
                                            <img src="../images/beginner1.png" alt="" class="beginnerImg">
                                            <p>绑定平台</p>
                                        </router-link>
                                        <img src="../images/rightIconBlue.png" alt="" class="rightIcon">
                                    </li>
                                    <li>
                                        <a href="#" @click="BeginnersJump(2)">
                                            <img src="../images/beginner2.png" alt="" class="beginnerImg">
                                            <p>绑定微信</p>
                                        </a>
                                        <img src="../images/rightIconBlue.png" alt="" class="rightIcon">
                                    </li>
                                    <li>
                                        <a href="https://wb.renqidaren.com/app_html/help_center.html">
                                            <img src="../images/beginner3.png" alt="" class="beginnerImg">
                                            <p>查看帮助</p>
                                        </a>
                                        <img src="../images/rightIconBlue.png" alt="" class="rightIcon">
                                    </li>
                                    <li>
                                        <a href="#" v-on:click="taskLink(0)">
                                            <img src="../images/beginner4.png" alt="" class="beginnerImg">
                                            <p>领取任务</p>
                                        </a>
                                        <img src="../images/rightIconBlue.png" alt="" class="rightIcon">
                                    </li>
                                    <li>
                                        <a href="#" @click="BeginnersJump(4)">
                                            <img src="../images/beginner5.png" alt="" class="beginnerImg">
                                            <p>完成首单</p>
                                        </a>
                                    </li>
                                    <!--class="beginnerClickRight"-->
                                    <!--<li></li>-->
                                </ul>
                                <div class="swiper-slide banner-f2" v-for="imgs in middleCarousel">
                                    <img :src=" imgs.img_url" alt="" v-if="imgs.img_url.indexOf('http') != -1"
                                         height="100%"
                                         @click="jumpLinkBanner(imgs.jump_link)">
                                    <img :src=" qiniu_domain + imgs.img_url" v-else-if="qiniu_domain" height="100%"
                                         @click="jumpLinkBanner(imgs.jump_link)">
                                </div>
                            </div>
                        </div>
                    </transition>

                    <!--<div class="swiper-container swiper-container-horizontal swiper-container-free-mode">-->
                    <!--<div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">-->
                    <!---->
                    <!--</div>-->

                    <!--</div>-->
                </div>
            </div>

            <!-- 列表视图 -->
            <!--<transition name="fade">-->
            <!--<div v-show="gridView">-->
            <!--<div class="clearfix view-switches">-->
            <!--<img src="@/images/lb-icon-1.png" alt="" class="fl">-->
            <!--<img src="@/images/wg-icon-2.png" alt="" class="fr" @click="gridView = !gridView">-->
            <!--</div>-->
            <!--<div class="btnPutWork">-->
            <!--<div class="btnPutWork-btn">-->
            <!--<button>推荐任务</button>-->
            <!--</div>-->
            <!--&lt;!&ndash;<span class="countDown" @click="$toast('距离下一波任务来袭还有：' + time)">2131321321321</span>&ndash;&gt;-->
            <!--<span class="countDown" v-if="flagShow" @click="$toast('距离下一波任务来袭还有：' + time)">{{ time }}</span>-->

            <!--<div class="consumerBody fr">-->
            <!--<select name="" id="consumersTab" v-model="consumer_id">-->
            <!--<option :value="consumers.consumer_id" v-for="consumers in consumersTab">{{-->
            <!--consumers.login-->
            <!--}}-->
            <!--</option>-->
            <!--</select>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="W_723 " id="flip-list-demo">-->
            <!--<transition-group name="flip-list" tag="div">-->
            <!--<div class="goodWokrs clearfix" v-for="(task, index) in tasks" v-bind:key="task._id"-->
            <!--@click="toastdata(task.list.user_money, task.list.sort)">-->
            <!--<img src="../images/questionIcon.png" alt="" class="questionIcon"-->
            <!--v-if="task.list.question && task.list.question != 'NULL'">-->
            <!--<div class="titleH3 fl">-->
            <!--<h3 class="Bigcolor">{{ task.list.type }}</h3>-->
            <!--<img :src="task.list.image" v-if="task.list.image.indexOf('http') != -1"-->
            <!--:onerror="defaultImg()"/>-->
            <!--<img :src="qiniu_domain + task.list.image" v-else :onerror="defaultImg()"/>-->
            <!--<img src="../images/defaultImg.png" alt="" class="defaultImg">-->
            <!--</div>-->
            <!--<div class="fr_workText fl">-->
            <!--<div class="Numlists">-->
            <!--<div class="linder">-->
            <!--<div class="titleNewimg">-->
            <!--<img src="../images/homese1.png"/>-->
            <!--<span>{{ task.list.goods_title }}</span>-->
            <!--</div>-->
            <!--<div class="workNeed" v-if="task.list.sort != '1000000000'">-->
            <!--<span class="tj">每做<i>{{ lottery_min_recommend_get }}个</i>推荐任务 奖励<i>{{ lottery_min_recommend_get_number }}次</i>抽奖</span>-->
            <!--</div>-->
            <!--<div class="workNeed" v-else>-->
            <!--<span>{{ task.list.items }}</span>-->
            <!--</div>-->
            <!--<div class="moneyYmoney">-->
            <!--<img src="@/images/privilege-money.png"/>-->
            <!--<span>{{ task.list.user_money }}</span>-->
            <!--<em class="reward" v-if="task.list.reward">-->
            <!--<ul>-->
            <!--<li>加赏{{ task.list.reward.job_meta_value }}</li>-->
            <!--</ul>-->
            <!--</em>-->
            <!--<img src="@/images/privilege-jifen.png" style="margin-left: 0.5rem"/>-->
            <!--<span style="color: #A1D0FC" v-if="task.list.sort == '1000000000'">{{ finish_work_credit }}</span>-->
            <!--<span style="color: #A1D0FC" v-else>{{credit_multiple }}</span>-->
            <!--<span class="tuijian" v-if="task.list.sort != '1000000000'">推荐</span>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div class="fr_btnPutwork">-->
            <!--<div class="corSred"></div>-->
            <!--<button v-on:click="submit(task.list.work_id)">领取</button>-->
            <!--</div>-->
            <!--</div>-->
            <!--</transition-group>-->

            <!--<div class="btnPutWork refreshby">-->
            <!--<span @click="refresh('click')" class="refresh" :class="{ active: refreshActive}"> <img-->
            <!--src="../images/refresh.png" alt="">刷新</span>-->
            <!--<span class="fr"><img src="@/images/gengduo.png" alt="" v-on:click="taskLink(0)">更多</span>-->
            <!--</div>-->
            <!--<div class="tjimg" v-if="tjimg">-->
            <!--<img src="../images/tjimg.png" alt="">-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</transition>-->
            <!-- 网格视图 -->
            <transition name="fade">
                <div style="padding-bottom: 1.5rem;margin-top: .1rem">
                    <!--<div class="clearfix view-switches">-->
                    <!--<img src="@/images/wg-icon-1.png" alt="" class="fl">-->
                    <!--<img src="@/images/lb-icon-2.png" alt="" class="fr" @click="gridView = !gridView">-->
                    <!--</div>-->
                    <div class="grid-view">
                        <ul class="clearfix" style="padding: 0 0.15rem">
                            <li v-for="(task, index) in grids.data" @click="gridsUrl(task.type)">
                                <img :src="'../static/images/lb_icon' + (index+1) + '.png'" alt="" class="fl">
                                <h4>{{ task.name }}</h4>
                                <p>{{ task.num }}<span style="font-size:0.2rem;margin-left: 0.1rem">个</span></p>
                            </li>
                        </ul>
                        <!--<div style="padding: 0 .2rem">-->
                        <!--<div @click="taskLink(2)" id="corss">-->
                        <!--<em class="fr"><i>50</i>个</em>-->
                        <!--<p><img src="@/images/huang.png" alt="">限时任务专属大厅 <span>领取限制放宽</span></p>-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                    <!--<div class="game-task">-->
                    <!--<h3 class="clearfix"><img src="@/images/gameLogo.gif" class="los">试玩任务 <span class="fr">玩游戏也能赚佣金<img-->
                    <!--src="@/images/game-icon-right.png" alt="" class="ics" ></span></h3>-->
                    <!--</div>-->
                    <div class="timing-works" v-if="timingWorksList">
                        <h2><span><img src="@/images/timingLogo.png" alt="">小新播报站 定时上新</span></h2>
                        <ul class="timing-works-list">
                            <li class="clearfix" v-for="task in timingWorksList">
                                <img :src="task.image.url" alt="" class="fl"
                                     v-if="task.image.url.indexOf('http') != -1">
                                <img :src="qiniu_domain_url + task.image.url" class="fl" v-else/>

                                <div>
                                    <h3>{{ task.goods.goods_title }}</h3>
                                    <p v-if="task.timingTime"><span>{{ task.timingTime }}</span>后上新</p>
                                    <p>请到任务大厅领取</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="timing-works" v-if="preheatList.length > 0">
                        <h2><span><img src="@/images/timingLogo.png" alt="">小新播报站 任务预热</span></h2>
                        <ul class="timing-works-list">
                            <li class="clearfix" v-for="task in preheatList">
                                <img :src="task.list.image" alt="" class="fl"
                                     v-if="task.list.image.indexOf('http') != -1">
                                <img :src="qiniu_domain_url + task.list.image" class="fl" v-else/>

                                <div>
                                    <h3>{{ task.list.goods_title }}</h3>
                                    <p v-if="task.timingTime"><span>{{ task.timingTime }}</span>后上新</p>
                                    <p>请到任务大厅领取</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="botmImgs-kgts"  v-if="preheatList">
                        <img src="../images/kgts.png" />
                    </div>
                </div>
            </transition>
            <!-- 抢任务 -->
            <!--<div class="botmImgs" v-if="!returnNumber">-->
            <!--<img src="../images/workall.png" @click="randomWork"/>-->
            <!--</div>-->

        </div>

        <!-- 首页弹窗 -->
        <div class="tc-img" v-if="tcImg" @click="tcImg = false">
            <img :src="tcImg" alt="">
        </div>
        <!-- 长连接消息 -->
        <polling/>

        <!-- 提醒回访任务 -->
        <!--<div class="returnData" v-if="returnNumber" style="font-size: .3rem"><img src="../images/logoGif.gif" alt="">您有新的回访任务-->
        <!--<span @click="returnWork">立即领取</span></div>-->
        <!--<div class="returnData" v-else><img src="../images/logoGif.gif" alt="">不想找？<span-->
        <!--@click="randomWork">抢一个</span></div>-->

        <!-- 底部切换 -->
        <barTab/>
    </div>
</template>

<script>
    import api from '../utils/api';
    import MarqueeTips from 'vue-marquee-tips'
    import Polling from '@/components/components/polling';
    import barTab from '@/components/components/barTabBottom';
    import axios from 'axios'

    export default {
        name: 'Index',
        components: {
            MarqueeTips,
            Polling,
            barTab
        },
        data() {
            return {
                type: 0,
                tasks: [],
                consumer_id: 0,
                notice_text: '',
                bannerImgs: [],
                position: {x: 0, y: 0},
                nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
                is_greener: false,
                logina: false,
                qiniu_domain: '',
                tjimg: false,
                // endTime: false,
                // time: false,
                unread: false,
                middleCarousel: false,
                // refreshActive: false,
                flag: false,
                randomWorkShow: true,
                flagShow: false,
                returnNumber: false,
                consumersTab: false,
                tcImg: false,
                show: true,
                domin: localStorage.getItem('domin'),
                is_sign: true,
                activity: false,
                // gridView: true,
                newbies: true,
                grids: false,
                // credit_multiple: false, // 推荐积分
                // finish_work_credit: false, // 积分
                lottery_min_recommend_get: '',
                lottery_min_recommend_get_number: '',
                user_work_count: [],
                timingWorksList: false,
                timingTimeVal: null,
                preheatTimeVal: null,
                qiniu_domain_url: 'https://imgshangjia.renqidaren.com/',  //七牛主域名
                preheatList: false

            }
        },
        async created() {
            // 通知
            localStorage.setItem('bartabInx', 1)
            await api.request('/notice', 'get', {}).then((resp) => {
                var lis = '';
                for (let notice in resp.data.data) {
                    lis += resp.data.data[notice].content + '      '
                }
                this.bannerImgs = resp.data.message;
                this.notice_text = lis;
                this.$nextTick(() => {
                    new Swiper('.swiper-container1', {
                        autoplay: 3000
                    })
                })
            })


            // if (localStorage.getItem('credit_multiple')) {
            //     this.credit_multiple = parseInt(localStorage.getItem('credit_multiple'))
            //     this.finish_work_credit = parseInt(localStorage.getItem('finish_work_credit'))
            // }
            if (!this.consumersTab) {
                // 切换买号
                this.consumers();
            }
            if (localStorage.getItem('consumersId')) {
                this.consumer_id = localStorage.getItem('consumersId')
            }

            // 萌新攻略
            this.newbies = !!localStorage.getItem('newbiesExpand')
            // 网络视图
            // this.gridView = !!localStorage.getItem('gridViewLocal')
        },
        methods: {
            // refresh(res) {
            //     this.refreshActive = true;
            //     api.request('/recommendTask', 'get', {
            //         type: this.type,
            //         consumer_id: this.consumer_id
            //     }).then((resp) => {
            //         let arr = resp.data.data
            //         if (arr.length > 0) {
            //             this.tjimg = false;
            //             this.tasks = _.shuffle(arr)
            //         } else {
            //             this.tjimg = true
            //         }
            //         if (res == 'click') {
            //             this.$toast('刷新成功');
            //         }
            //         this.refreshActive = false
            //     })
            // },
            taskLink(index) {
                if (this.consumersTab.length == 0) {
                    this.$toast('请先去个人中心绑定任务号')
                    return false;
                }
                this.$router.push({
                    path: `/task/list/${index}`
                })
            },
            privilegeTask() {
                if (this.consumersTab.length == 0) {
                    this.$toast('请先去个人中心绑定任务号')
                    return false;
                }
                this.$router.push({
                    path: `/task/privilege`
                })
            },
            // 领取任务
            // async submit(work_id) {
            //     let param = {
            //         work_id: work_id,
            //         consumer_id: this.consumer_id
            //     }
            //     let resp = await api.request('/works/create', 'post', param)
            //     let id = resp.data.data.work_user_id;
            //     this.$router.push({
            //         path: `task/detail/${id}`
            //     })
            //     // window.AndroidWebView.PictureCallback(`${this.domin}task/detail/${id}`, '任务详情');
            // },
            // 新手随机领取
            async randomWork() {
                if (this.randomWorkShow) {
                    this.randomWorkShow = false;
                    setTimeout(() => {
                        this.randomWorkShow = true;
                    }, 2000)
                    let param = {
                        consumer_id: this.consumer_id
                    }
                    let resp = await api.request('/works/randomWork', 'post', param)
                    let id = resp.data.data.work_user_id;
                    this.$router.push({
                        path: `task/detail/${id}`
                    })
                    // window.AndroidWebView.PictureCallback(`${this.domin}task/detail/${id}`, '任务详情');


                } else {
                    this.$toast('手速太快请稍后重试')
                }
            },
            unreadLink() {
                this.$router.push({
                    path: `/task/message`
                })
                // window.AndroidWebView.PictureCallback(`${this.domin}task/message`, '我的消息');


            },
            async returnWork() {
                if (this.returnNumber) {
                    let param = {
                        consumer_id: this.consumer_id
                    }
                    let resp = await api.request('/works/returnRandomWork', 'post', param)
                    let id = resp.data.data.work_user_id;
                    this.$router.push({
                        path: `task/detail/${id}`
                    })
                    // window.AndroidWebView.PictureCallback(`${this.domin}task/detail/${id}`, '任务详情');
                } else {
                    this.$toast('暂无回访任务')
                }

            },
            jumpLinkBanner(url) {
                if (url) {
                    let urlBanner = ''
                    urlBanner = url + '?token=' + localStorage.getItem('token')
                    window.location = urlBanner
                }
            },
            async notice() {
                if (this.consumer_id && this.consumersTab.length != 0) {
                    //网格视图数据
                    await api.request('/grids', 'get', {consumer_id: this.consumer_id}).then((resp) => {
                        this.grids = resp.data
                    }).catch((resp) => {
                        if (resp.error.indexOf('请选择默认任务号') != -1) {
                            localStorage.setItem('consumersId', this.consumersTab[0].consumer_id);
                            this.consumer_id = this.consumersTab[0].consumer_id;

                        }
                    })
                }

                // 分数
                await api.request('/user_work_count', 'get', {}).then((resp) => {
                    if (resp.data.data) {
                        this.user_work_count = resp.data.data
                    } else {
                        this.user_work_count.score = 0
                    }

                })
                //我的消息是否有未读
                await api.request('/user-notice/unread-count', 'get', {}).then((resp) => {
                    this.unread = resp.data.data
                })

                // 回访任务数量
                await api.request('/returnNumber', 'get', {consumer_id: this.consumer_id}).then((resp) => {
                    this.returnNumber = resp.data.data;
                })
                //首页中部轮播
                await api.request('/notice', 'get', {type: 5}).then((resp) => {
                    this.middleCarousel = resp.data.message
                    if (this.newbies) {
                        this.$nextTick(() => {
                            new Swiper('.swiper-container2', {})
                        })
                    }
                })
                // //计时任务发布时间
                await api.request('/preheat', 'get', {consumer_id: this.consumer_id}).then((resp) => {
                    if (resp.data.message != 2) {
                        this.preheatList = resp.data.data;
                        var _that = this;
                        clearInterval(_that.preheatTimeVal)
                        _that.preheatTimeVal = setInterval(function () {
                            _that.preheatTiming_val()
                        }, 1000)
                    }
                })

            },
            // 定时任务返回日期算法
            preheatTiming_task(leftTime) {
                let time = '';
                let d = parseInt(leftTime / (24 * 60 * 60))
                let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
                let m = this.formate(parseInt(leftTime / 60 % 60))
                let s = this.formate(parseInt(leftTime % 60))
                if (leftTime <= 1) {
                    this.timingTime = false
                    return false;
                }
                d != 0 ? time += d + '天' : '';
                h != 0 ? time += h + '小时' : '';
                m != 0 ? time += m + '分' : '';
                return time + s + '秒'
            },
            // 循环输出剩余时间
            preheatTiming_val() {
                var _that = this;
                for (var i in _that.preheatList) {
                    var tims = this.preheatTiming_true(_that.preheatList[i].list.start_time, _that.preheatList[i].list.mktime)
                    _that.preheatList[i].list.mktime++
                    if (tims) {
                        _that.$set(_that.preheatList[i], 'timingTime', _that.preheatTiming_task(tims))
                    } else {
                        _that.$set(_that.preheatList[i], 'timingTime', '')
                    }
                }
            },
            // 定时任务判断
            preheatTiming_true(start_time, mktime) {
                var set = parseInt(start_time) - parseInt(mktime);
                if (set <= 0) {
                    return false;
                } else {
                    return set;
                }
            },
            async common() {
                // 公共参数
                let resp = await api.request('/common', 'get', {})
                let datas = resp.data.data;
                // 热门活动
                localStorage.setItem('activity', datas.activity)
                localStorage.setItem('qq_flock', datas.qq_flock)
                localStorage.setItem('lottery_min_recommend_get', datas.lottery_min_recommend_get)
                localStorage.setItem('lottery_min_recommend_get_number', datas.lottery_min_recommend_get_number)
                localStorage.setItem('is_lottery', datas.is_lottery)
                this.lottery_min_recommend_get = datas.lottery_min_recommend_get;
                this.lottery_min_recommend_get_number = datas.lottery_min_recommend_get_number
                // 普通任务积分
                // this.finish_work_credit = datas.finish_work_credit
                localStorage.setItem('finish_work_credit', datas.finish_work_credit)
                // 推荐任务积分
                // this.credit_multiple = datas.credit_multiple
                localStorage.setItem('credit_multiple', datas.credit_multiple)
                this.activity = datas.activity
                if (datas.is_greener) {
                    this.newbies = true;
                } else {
                    this.newbies = false
                }
                this.is_greener = datas.is_greener;
                this.is_sign = datas.is_sign
                localStorage.setItem('qiniu_domain', datas.service_qiniu_domain + '/')
                this.qiniu_domain = datas.service_qiniu_domain + '/';
                // window.AndroidWebView.upLoadWebView(1);


            },
            BeginnersJump(inx) {
                // 0 登陆页面 1 绑定买号 2 绑定微信页面 3 帮助页面 4 任务列表 5 邀请好友
                window.AndroidWebView.consumers(Number(inx));
            },
            // timeDown() {
            //     const endTime = new Date(this.endTime)
            //     const nowTime = new Date();
            //     let time = '';
            //     let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
            //     let d = parseInt(leftTime / (24 * 60 * 60))
            //     let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
            //     let m = this.formate(parseInt(leftTime / 60 % 60))
            //     let s = this.formate(parseInt(leftTime % 60))
            //     if (leftTime <= 0) {
            //         this.flag = true;
            //         return false;
            //     }
            //     d != 0 ? time += d + '天' : '';
            //     h != 0 ? time += h + '小时' : '';
            //     m != 0 ? time += m + '分' : '';
            //     this.time = time + s + '秒'
            // },
            formate(time) {
                if (time >= 10) {
                    return time
                } else {
                    return `0${time}`
                }
            },
            async consumers() {
                let consumers = await api.request('/consumers/normal', 'get', {})
                this.consumersTab = consumers.data.data;

            },
            async uploadImg() {
                // 是否存储买号
                var consumers = await api.request('/consumers/normal', 'get', {})
                // 没有买号的时候 跳转绑定买号页面
                if (consumers.data.data.length == 0) {
                    // this.consumers()
                    this.$toast('请先去个人中心绑定任务号')
                    return false;
                }
                this.consumersTab = consumers.data.data
                // 存储买号 默认为一
                if (consumers.data.data && !localStorage.getItem('consumersId')) {
                    localStorage.setItem('consumersId', consumers.data.data[0].consumer_id);
                    this.consumer_id = consumers.data.data[0].consumer_id
                }
                // 首页弹窗
                await api.request('/notice', 'get', {type: 4}).then((resp) => {
                    if (resp.data.message.length >= 1) {
                        this.$nextTick(() => {
                            this.tcImg = resp.data.message[0].img_url
                        })
                    }
                })
            },
            async signInRes() {
                this.is_sign = true
                await api.request('/signIn', 'post', {}).then((res) => {
                    this.$toast(res.data.message + '获得奖励' + res.data.data);
                })
            },
            formatStr(str) {
                var head = str.substring(0, 5, str.length);
                var last = str.substring(5, str.length);
                return head + '*'.repeat(last.length);
            },
            // 默认图片
            defaultImg() {
                return 'this.src="' + require('@/images/defaultImg.png') + '"'
            },
            gridsUrl(type) {
                // window.AndroidWebView.taskLinkIndex(`${this.domin}task/list/${0}?type=${type}`);
                this.$router.push({
                    path: `task/list/${0}?type=${type}`
                })
            },
            // toastdata(user_money, sort) {
            //     var jf = 0
            //     if (sort == '1000000000') {
            //         jf = this.finish_work_credit
            //     } else {
            //         jf = this.credit_multiple
            //     }
            //     this.$toast('佣金：' + user_money + '　　积分：' + jf)
            // },

            // 定时上新
            async timingWorksFun() {
                var _that = this;
                await api.request('/timingWorks', 'get', {}).then((res) => {
                    if (res.data.data != '') {
                        _that.timingWorksList = res.data.data;
                    } else {
                        return false;
                    }

                    clearInterval(_that.timingTimeVal)
                    _that.timingTimeVal = setInterval(function () {
                        _that.timing_val(Date.parse(new Date()) / 1000)
                    }, 1000)
                })
            },

            // 定时任务返回日期算法
            timing_task(leftTime) {
                let time = '';
                let d = parseInt(leftTime / (24 * 60 * 60))
                let h = this.formate(parseInt(leftTime / (60 * 60) % 24))
                let m = this.formate(parseInt(leftTime / 60 % 60))
                let s = this.formate(parseInt(leftTime % 60))

                d != 0 ? time += d + '天' : '';
                h != 0 ? time += h + '小时' : '';
                m != 0 ? time += m + '分' : '';
                return time + s + '秒'
            },
            // 循环输出剩余时间
            timing_val(timestamp) {
                var _that = this;
                for (var i in _that.timingWorksList) {
                    var tims = this.timing_true(_that.timingWorksList[i].start_timing, timestamp)
                    // _that.$set(_that.timingWorksList[i], 'start_timing',  _that.timingWorksList[i].start_timing ++)
                    if (tims) {
                        _that.$set(_that.timingWorksList[i], 'timingTime', _that.timing_task(tims))
                    }
                }
            },
            timing_true(start_time, timestamp) {
                var set = parseInt(start_time) - timestamp;
                if (set <= 0) {
                    return false;
                } else {
                    return set;
                }
            }
        },
        mounted() {
            // if (window.AndroidWebView.firstStart() == 1) {
            //     this.uploadImg()
            // } else {
            //     // 切换买号
            //     this.consumers();
            // }
            // 公共参数
            this.common()
            this.uploadImg()
            this.timingWorksFun()
            // 公告
            // this.notice()

            // 刷新推荐任务
            // this.refresh()

            //     微信信息
            // this.wechatToken()
        },
        watch: {
            consumer_id(newValue) {
                localStorage.setItem('consumersId', newValue);
                // this.refresh()
                this.notice()

            },
            newbies(newbies) {
                if (newbies && this.middleCarousel) {
                    this.$nextTick(() => {
                        new Swiper('.swiper-container2', {})
                    })
                }
                if (newbies) {
                    localStorage.setItem('newbiesExpand', 1)
                } else {
                    localStorage.removeItem('newbiesExpand')
                }

            },
            // gridView(gridView) {
            //     if (gridView) {
            //         localStorage.setItem('gridViewLocal', gridView)
            //     } else {
            //         localStorage.removeItem('gridViewLocal')
            //     }
            //
            // }
        }
    }

</script>

<style scoped>
    @keyframes rowup {
        0% {
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
        100% {
            -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
        }
    }

    .list {
        position: relative;
        overflow: hidden;
        font-size: 0.28rem;
    }

    .list .item {
        width: 10000px;
    }

    .list .item span {
        display: inline-block;
    }

    .list .item span {
        -webkit-animation: 10s rowup linear infinite normal;
        animation: 10s rowup linear infinite normal;
        position: relative;
    }

    /*.xuanfu {*/
    /*height: 4.5rem;*/
    /*width: 4.5rem;*/
    /*!* 如果碰到滑动问题，1.3 请检查 z-index。z-index需比web大一级*!*/
    /*z-index: 999;*/
    /*position: fixed;*/
    /*top: 4.2rem;*/
    /*right: 3.2rem;*/
    /*border-radius: 0.8rem;*/
    /*background-color: rgba(0, 0, 0, 0.55);*/
    /*}*/

    /*.yuanqiu {*/
    /*height: 2.7rem;*/
    /*width: 2.7rem;*/
    /*border: 0.3rem solid rgba(140, 136, 136, 0.5);*/
    /*margin: 0.65rem auto;*/
    /*color: #000000;*/
    /*font-size: 1.6rem;*/
    /*line-height: 2.7rem;*/
    /*text-align: center;*/
    /*border-radius: 100%;*/
    /*background-color: #ffffff;*/
    /*position: relative;*/
    /*z-index: 999;*/
    /*}*/

    /*.W_723 {*/
    /*padding-bottom: 4rem;*/
    /*}*/

    /*.marquee-tips {*/
    /*font-size: .3rem;*/
    /*line-height: .55rem;*/
    /*}*/

    .wokrList {
        background: #fff;
    }

    /*#status_text {*/
    /*font-size: .1rem;*/
    /*}*/

    #beginner .swiper-slide {
        height: 2.2rem;
    }

    #beginner .banner-f2 {
        width: 100%;
    }

    +
    #beginner .banner-f2 img {
        height: 100%;
        display: block;
        background: #fff;
    }

    /*.consumerBody {*/
    /*text-align: center;*/
    /*!*background: #5AACFE;*!*/
    /*border: 1px solid #A2D0FC;*/
    /*!*padding: 0rem .2rem;*!*/
    /*-webkit-border-radius: .2rem;*/
    /*-moz-border-radius: .2rem;*/
    /*border-radius: .2rem;*/
    /*margin-right: 0.2rem;*/
    /*height: .8rem;*/
    /*line-height: .8rem;*/
    /*position: relative;*/
    /*width: 2.4rem;*/
    /*}*/

    .consumerBody select {
        background: transparent;
        border: 0;
        -webkit-border-radius: .1rem;
        -moz-border-radius: .1rem;
        border-radius: .1rem;
        outline: none;
        width: 2.4rem;
        color: #A2D0FC;
        position: absolute;
        line-height: 0.8rem;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;

    }

    .tc-img {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 999;
        background: rgba(0, 0, 0, .7);
    }

    .tc-img img {
        max-width: 90%;
        display: block;
        margin: 0 auto;
        margin-top: 20%;
    }

    #signIn {
        position: absolute;
        top: -0.1rem;
        right: -0.1rem;
        width: .9rem;
        height: .9rem;
        -webkit-box-shadow: 0 0 0.2rem #0CA3F9;
        box-shadow: 0 0 0.2rem #0CA3F9;
        border-radius: 50%;
        z-index: 99;
        background: #fff;
        padding-top: 0;
    }

    #signIn img {
        width: .6rem;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -.3rem;
        margin-top: -.25rem;
    }

    .returnData {
        background: rgba(255, 255, 255, .9);
        position: fixed;
        bottom: 1.8rem;
        left: 2rem;
        right: 2.2rem;
        padding: .15rem .3rem;
        border-radius: .2rem;
        color: #000;
        z-index: 9999;
        font-weight: 600;
        font-size: .4rem;
        padding-left: 1.8rem;
        box-shadow: 0 0 0.2rem #0CA3F9;
    }

    .returnData span {
        color: #5AACFE;
        margin-left: .3rem;
    }

    .returnData img {
        width: 1rem;
        top: -0.65rem;
        left: .5rem;
        position: absolute;

    }

    /*.activity {*/
    /*padding: 0 .2rem;*/
    /*margin-top: .2rem;*/
    /*overflow: hidden;*/
    /*position: relative;*/
    /*}*/

    /*.activity .activity-bg {*/
    /*border-radius: .3rem;*/
    /*!*border:1px solid #FF62B1;*!*/
    /*}*/

    /*.bounce-enter-active {*/
    /*animation: bounce-in .5s;*/
    /*}*/

    /*.bounce-leave-active {*/
    /*animation: bounce-in .5s reverse;*/
    /*}*/

    .is_greenerAnimate {
        animation: is_greenerAnimate 1.5s infinite;
    }

    @keyframes is_greenerAnimate {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.3);
        }
        100% {
            transform: scale(1);
        }
    }

    .balance {
        animation: bounce-in .5s;
    }

    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }

    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    {
        opacity: 0;
    }

    /*.flip-list-move {*/
    /*transition: transform 1s;*/
    /*}*/

    /*.slide-fade-enter-active {*/
    /*transition: all 1s ease;*/
    /*}*/

    /*.slide-fade-leave-active {*/
    /*transition: all .5s ease;*/
    /*}*/

    /*.slide-fade-enter, .slide-fade-leave-to*/
    /*!* .slide-fade-leave-active for below version 2.1.8 *!*/
    /*{*/
    /*transform: translateX(50px);*/
    /*opacity: 0;*/
    /*}*/

    /*#app {*/
    /*padding-bottom: 1rem;*/
    /*}*/

    /*#corss {*/
    /*font-size: .5rem;*/
    /*line-height: 1.5rem;*/
    /*height: 1.5rem;*/
    /*border-radius: 0.1rem;*/
    /*padding: 0 .5rem;*/
    /*margin-top: .5rem;*/
    /*background: -webkit-linear-gradient(left, #FCF1D5, #F2DDA0);*/
    /*background: -o-linear-gradient(left, #FCF1D5, #F2DDA0);*/
    /*background: -moz-linear-gradient(left, #FCF1D5, #F2DDA0);*/
    /*background: linear-gradient(left, #FCF1D5, #F2DDA0);*/
    /*background-image: url("../images/crossBg.png");*/
    /*}*/

    #corss p {
        font-weight: 600;
        color: #6C5B27;
    }

    #corss p img {
        width: 0.9rem;
        display: inline-block;
        vertical-align: middle;
        margin-top: -0.3rem;
        margin-right: 0.3rem;
    }

    #corss .fr i {
        color: #D8B463;
        font-weight: 600;
        margin-right: 0.1rem;
    }

    #corss p span {
        font-size: .4rem;
        font-weight: 400;
        color: #43362B;
    }
</style>
